<template>
  <el-dialog
      v-model="visible"
      :close-on-click-modal="false"
      :show-close="true"
      :title="''"
      :width="props.device === DeviceEnum.MOBILE ? '90%' : '50%'"
      class="config-info-dialog"
      @close="props.closeDialog()"
  >
    <template #header>
      <div class="dialog-header">
        <svg-icon class="dialog-icon" icon-class="deepseek"/>
        <span class="dialog-title">{{ props.title }}</span>
      </div>
    </template>
    <el-form class="config-form" label-width="80px">
      <el-form-item label="模型" prop="model">
        <el-select
            v-model="configInfoSnapshot.configInfo.model"
            class="form-select"
            placeholder="请选择AI模型"
        >
          <el-option v-for="(value,key) in dictData['ai_model']" :label="value" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="模型温度" prop="temperature">
        <el-slider
            v-model="configInfoSnapshot.configInfo.temperature"
            :max="2"
            :min="0"
            :show-input="true"
            :show-stops="true"
            :step="0.01"
            class="form-slider"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="props.closeDialog()">取消</el-button>
        <el-button type="primary" @click="saveAiConfig()">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {DeviceEnum} from "@/enums/DeviceEnum";
import {UserChatConversationDetailVO} from "@/api/ai/chat/user-chat/type";
import {useDictionary} from "@/hooks/userDict";
import {UserChatAPI} from "@/api/ai/chat/user-chat";

defineOptions({
  name: "ConfigInfoDialog",
  inheritAttrs: false,
});

const props = withDefaults(defineProps<{
  visible: boolean;
  title: string;
  device?: DeviceEnum;
  closeDialog: (callback?: () => void) => void;
  conversationId: string;
  currentConversationInfo?: UserChatConversationDetailVO
}>(), {
  currentConversationInfo: () => ({}) as UserChatConversationDetailVO,
  device: DeviceEnum.DESKTOP,
  dictData: () => ({})
});

const emits = defineEmits<{
  (event: "update:visible", visible: boolean): void
  (event: "update:currentConversationInfo", visible: boolean): void
}>()

// hooks
const visible = useVModel(props, 'visible', emits)
const currentConversationInfo = useVModel(props, 'currentConversationInfo', emits)
const dictData = await useDictionary(['ai_model']); // 字典数据
const configInfoSnapshot = ref<UserChatConversationDetailVO>({
  maskInfo: {},
  configInfo: {
    id: currentConversationInfo.value.configInfo?.id,
    model: currentConversationInfo.value.configInfo?.model,
    temperature: currentConversationInfo.value.configInfo?.temperature
  },
  conversationInfo: {},
  toolIds: []
});

// 方法
function saveAiConfig() {
  // 保存AI配置
  UserChatAPI.UPDATE_CONFIG
      .request(props.conversationId, configInfoSnapshot.value.configInfo)
      .then(({data}) => {
        // 更新当前会话信息
        currentConversationInfo.value.configInfo = configInfoSnapshot.value.configInfo;
        props.closeDialog();
      })
}

// 初始方法
onMounted(() => {

});
</script>

<style lang="scss" scoped>
.config-info-dialog {
  // 保持无背景色和无阴影，简洁风格
  .el-dialog__body {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
  margin-bottom: 16px;

  .dialog-icon {
    font-size: 32px;
    margin-right: 10px;
  }

  .dialog-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
  }
}

.config-form {
  margin-top: 12px;

  .el-form-item {
    margin-bottom: 24px;

    .el-form-item__label {
      font-weight: bold;
      font-size: 15px;
    }

    .form-select {
      width: 100%;
    }

    .form-slider {
      width: 90%;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;

  .el-button {
    min-width: 80px;
    font-size: 15px;
    border-radius: 6px;
  }
}
</style>